<template>
  <div class="item" @mouseenter="isEnter = true" @mouseleave="isEnter = false">
    <div v-show="isEdit" class="edit_container">
      <div class="input-content">
        <el-input
          type="text"
          placeholder="请输入分组名称"
          v-model="groupText"
          maxlength="10"
          show-word-limit
        >
        </el-input>
      </div>
      <div style="margin-left: 10px;">
        <el-tooltip effect="dark" content="确定" placement="bottom">
          <el-button type="text" @click="comfirmEditGroup">
            <i class="el-icon-check"></i>
          </el-button>
        </el-tooltip>
      </div>
      <div style="margin-left: 10px;">
        <el-tooltip effect="dark" content="取消" placement="bottom">
          <el-button type="text" @click="cancelEditGroup">
            <i class="el-icon-close"></i>
          </el-button>
        </el-tooltip>
      </div>
    </div>
    <div v-show="!isEdit" class="show_container">
      <div class="titleContainer">
        <i 
          class="el-icon-rank handleMove" 
          v-show="isSort" 
          style="margin-right: 10px;cursor: grab;"
        ></i>
        <i class="el-icon-collection-tag"></i>
        <span style="margin-left: 10px;">{{ data.name }}</span>
      </div>
      <div class="numContainer">
        <span v-show="!isEnter">{{ data.num }}</span>
        <div v-show="isEnter" class="item_operation">
          <el-tooltip effect="dark" content="编辑" placement="bottom">
            <el-button type="text" @click="handleEdit" style="margin-right: 8px;">
              <i class="el-icon-edit"></i>
            </el-button>
          </el-tooltip>
          <el-popconfirm
            :title="'确定要删除' + data.name + '吗？'"
            @confirm="handleDelete"
            :id="'groupDeletePop_' + data.id"
          >
            <el-tooltip slot="reference" effect="dark" content="删除" placement="bottom">
              <el-button type="text">
                <i class="el-icon-delete"></i>
              </el-button>
            </el-tooltip>
          </el-popconfirm>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  name:'GroupItem',
  props: {
    data: {
      type: Object,
      default: () => {}
    },
    isSort: {
      type: Boolean,
      default: false
    },
    cursor: {
      type: String,
      default: 'grab'
    }
  },
  data() {
    return {
      isEdit: false,
      isEnter: false,
      groupText: '',
    }
  },
  methods: {
    handleEdit() {
      this.isEdit = true
      this.groupText = this.data.name
    },
    handleDelete() {
      this.$emit('delete', this.data)
    },
    comfirmEditGroup() {
      if(this.groupText?.trim()) {
        let data = {
          id: this.data.id,
          newName: this.groupText.trim()
        }
        this.$emit('edit', data)
        this.isEdit = false
      } else {
        this.$message.error("请输入分组名称")
      }
    },
    cancelEditGroup() {
      this.isEdit = false
      this.groupText = ''
    },
  }
}
</script>

<style lang='less' scoped>
  .item {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    .show_container {
      width: 100%;
      height: 100%;
      padding: 0 8px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .titleContainer {
        flex: 1;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .numContainer {
        margin-left: 10px;
        display: flex;
        align-items: center;
      }
    }
    .edit_container {
      width: 100%;
      height: 100%;
      padding: 0 8px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .input-content {
        flex: 1;
      }
    }
  }
</style>